<template>
	<view v-if="visible" class="mark">
		<view class="view">
			
			<!-- <text class="title">{{title}}</text>
			<view class="tip">新版更新内容</view> -->
			<!-- 	<scroll-view class="scroll" scroll-y>
				<view class="item" v-for="(item,index) in contents" :key="index">
					{{item}}
				</view>
			</scroll-view> -->
			
			
			 <view class="bgBox">
			 	<image class="" src="../../static/images/updatebg.png" style="width: 100%; height: 100%;"></image>
			 </view>
			 
			 
			<view class="contentBox" style="z-index: 99;">
				<view class="">
					1.新增黑科技，升级即可体验
				</view>
				<view class="">
					2.修复已知BUG，应用更顺畅
				</view>
				<view class="">
					3.界面设计视觉优化，体验更友好
				</view>
			</view>



			<view v-if="!downloading" class="btns" @click="onSureClick()" style="z-index: 99;">
				立即升级
				<!-- <image class="icon" src="https://download.cheshangji.cn/app/upgrade.png"></image>
				<view class="sure" @click="onSureClick()">马上升级</view> -->
			</view>
			<cmd-progress v-else class="progress" type="circle" stroke-color="#C40000"
				:percent="progress"></cmd-progress>
		</view>



		<view class="" style="margin-top: 36rpx;" @click="hide">
			<u-icon name="close-circle" color="#ffffff" size="56"></u-icon>
		</view>

	</view>
</template>

<script>
	import cmdProgress from '../cmd-progress/cmd-progress.vue'
	export default {
		components: {
			cmdProgress
		},
		data() {
			return {
				visible: false,
				progress: 0,
				contents: [],
				downloading: false,
				success: true
			}
		},
		props: {
			type: {
				type: String,
				default: 'pkg'
			},
			url: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: '版本更新'
			},
			content: {
				type: String,
				default: ""
			}
		},
		watch: {
			content() {
				var strs = this.content.split('\\n')
				for (var i = 0; i < strs.length; i++) {
					this.contents.push(strs[i])
				}
			}
		},
		methods: {
			show() {
				setTimeout(() => {
					if (this.success) {
						this.visible = true
					}
				}, 100);
			},
			hide() {
				setTimeout(() => {
					this.visible = false
				}, 100);
			},
			onCancelClick() {
				this.hide()
			},
			onSureClick() {
				var platform = uni.getSystemInfoSync().platform
				if (platform == 'ios' && this.type == 'pkg') {
					plus.runtime.openURL(this.url);
				} else {
					this.downloading = true
					var downloadTask = uni.downloadFile({
						url: this.url,
						success: (downloadResult) => {
							console.log(downloadResult);
							this.hide()
							if (downloadResult.statusCode === 200) {
								plus.runtime.install(downloadResult.tempFilePath, {
									force: false
								}, function() {
									plus.runtime.restart();
								}, (e) => {
									console.log(e);
									this.success = false
									uni.showToast({
										title: '安装升级包失败',
										icon: 'none'
									})
								});
							}
						}
					});
					downloadTask.onProgressUpdate((e) => {
						this.progress = e.progress
					})
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.mark {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		z-index: 1000;
	}

	.view {
		width: 491rpx;
		height: 606rpx;
		/* background-color: transparent; */
		border-radius: 15upx;
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		.bgBox{
			width: 491rpx;
			height: 606rpx;
			position: absolute;
			top: 0;
		}
	}

	.contentBox {
		line-height: 50rpx;
		margin-top: 326rpx;
		color: black;
	}

	.title {
		margin-top: 20upx;
		color: #C40000;
		font-weight: bold;
		font-size: 38upx;
		text-align: center;
	}

	.tip {
		margin-top: 20upx;
		margin-left: 30upx;
		align-self: flex-start;
		font-size: 32upx;
		font-weight: 600;
		color: black;
	}

	.scroll {
		width: 100%;
		height: 300upx;
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.item {
		margin-left: 50upx;
		text-align: left;
		font-size: 30upx;
	}

	.btns {
		// width: 100%;
		// display: flex;
		// flex-flow: row nowrap;
		// justify-content: center;
		// align-items: center;
		// margin-bottom: 10upx;
		width: 232rpx;
		height: 68rpx;
		background: linear-gradient(90deg, #75EFFF 0%, #3C89F2 100%);
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		opacity: 1;
		color: #ffffff;
		text-align: center;
		line-height: 68rpx;
		margin-top: 45rpx;
	}

	.icon {
		width: 45upx;
		height: 45upx;
		margin-right: 10upx;
	}

	.sure {
		padding: 10upx 0;
		text-align: center;
		color: #C40000;
		font-size: 30upx;
		font-weight: 500;
	}

	.progress {
		margin-bottom: 20upx;
	}
</style>